<template>
	<view class="zxh-th-massage">
		<view class="massage-img">
			<img src="../../../static/image/Square/wen01.jpg" alt="">
		</view>
		<p class="massage-name">卡通金属文具盒</p>
		<p class="massage-money">￥23</p>
		<h2>可搭配不同系列堆堆袜，再配上俏皮风格的服装或者复古简约风等等都是非常的好看。</h2>
		<h3>发布人</h3>
		<view class="xiangqing-master">
			<view class="xiangqing-tou">
				<img src="../../../static/image/Square/tou.jpg" alt="">
				<p>你得支棱起来呀</p>
			</view>
			<span class="span1" v-show="isShow" @click="isShow = !isShow">+关注</span>
			<span class="span2" v-show="!isShow" @click="isShow = !isShow">取消关注</span>
		</view>
		<h3>全部留言</h3>
		<view class="xiangqing-pingluen">
			<Pingluen v-for="item in liuyan" :key="item.id" :liuyan="item"></Pingluen>
		</view>
		<view class="xiangqing-faxiaoxi">
			<view class="faxiaoxi-dianzan">
				<u-icon name="thumb-up" color="#28d2d1" size="40"></u-icon>
			</view>
			<input type="text" placeholder="输入您要发布的评论" v-model="value">
			<span @click="pubsub">发布评论</span>
		</view>
	</view>
</template>

<script>
	import Pingluen from '../components/Pingluen.vue';
	export default {
		components:{
			Pingluen
		},
		data(){
			return{
				value:"",
				isShow:true,
				liuyan:[]
			}
		},
		methods:{
			pubsub(){
				if(!this.value==''){
					let obj = {
						user:"你得支棱起来呀",
						massage:this.value
					}
					this.liuyan.push(obj);
					this.value = ''
				}
			}
		},
		mounted() {
			this.$api.zxhliuyan().then(res => {
				this.liuyan = res.data;
			})
		}
	}
</script>

<style lang="scss" scoped>
.zxh-th-massage{
	padding: 0;
	margin: 0;
	.massage-img{
		width: 95%;
		margin: 20upx auto;
		img{
			width: 100%;
		}
	}
	.massage-name{
		height: 50upx;
		font-size: 30upx;
		padding-left: 25upx;
		line-height: 50upx;
	}
	.massage-money{
		height: 50upx;
		font-size: 30upx;
		padding-left: 25upx;
		line-height: 50upx;
		color: #ff7098;
	}
	h2{
		font-size: 24upx;
		font-weight: 300;
		padding: 0 25upx;
		margin-top: 5upx;
	}
	h3{
		margin: 70upx 0 20upx 30upx;
		border-left: 20upx solid #28d2d1;
		padding-left: 8upx;
		font-size: 38upx;
		font-weight: 600;
	}
	.xiangqing-master{
		width: 95%;
		margin: 0 auto;
		height: 120upx;
		border-radius: 15upx;
		position: relative;
		.xiangqing-tou{
			width: 320upx;
			height: 120upx;
			img{
				height: 80%;
				margin-top: 10upx;
				margin-left: 10upx;
				float: left;
			}
			p{
				font-size: 22upx;
				font-weight: 600;
				line-height: 120upx;
				margin-left: 20upx;
				float: left;
			}
		}
		.span1{
			width: 140upx;
			height: 65upx;
			font-size: 28upx;
			text-align: center;
			line-height: 65upx;
			background: #28d2d1;
			border-radius: 25upx;
			position: absolute;
			top: 27upx;
			right: 30upx;
		}
		.span2{
			width: 140upx;
			height: 65upx;
			font-size: 28upx;
			text-align: center;
			line-height: 65upx;
			background: #cccccc;
			border-radius: 25upx;
			position: absolute;
			top: 27upx;
			right: 30upx;
		};
	}
	.xiangqing-pingluen{
		padding-bottom: 130upx;
	}
	.xiangqing-faxiaoxi{
		width: 100%;
		height: 125upx;
		background: #fff;
		border-top: 1upx solid #ccc;
		position: fixed;
		left: 0;
		bottom: 0;
		.faxiaoxi-dianzan{
			width: 125upx;
			height: 125upx;
			margin-left: 25upx;
			margin-top: 25upx;
		}
		input{
			width: 400upx;
			height: 80upx;
			background: #ccc;
			border-radius: 15upx;
			position: absolute;
			top: 25upx;
			left: 120upx;
		}
		span{
			width: 160upx;
			height: 80upx;
			background: #28d2d1;
			color: #fff;
			border-radius: 30upx;
			text-align: center;
			line-height: 80upx;
			position: absolute;
			top: 25upx;
			right: 25upx;
		}
	}
}
</style>